<template>
   <el-descriptions class="margin-top" title="个人中心" :column="3" :size="size">
    <template slot="extra">
      <el-button type="primary" size="small" @click="handleEdit">编辑</el-button>
    </template>
    <el-descriptions-item :label="finalTableHead[item]" v-for="(item,index) in Object.keys(finalTableHead) " :key="index">{{ personalMessage[item]}}</el-descriptions-item>
    
  </el-descriptions>
</template>

<script>
import axios from 'axios'

export default {
    data(){
          return {
              size: '',
              username:'',
              personalMessage:[],
              message:[],
              submitData:{},
              finalTableHead:{},

              tableHeadDataTeacher:{
                tnub: '老师编号',
                username:'用户名',
                password:'密码',
                tname:'姓名',
                college: '所属院校',
                phone: '电话',
              
              
              },
              tableHeadDataStu:{
                studentId: '学生编号',
                username: '用户名',
                password: '密码',
                choosebishenum: '已选毕设号',
                phone: '联系方式',
                score: '绩点',
                univercity: '所属院校',
                classname: '所属专业班级',
              },


            }
    },
    created(){

    // if(localStorage.getItem("token")) {
    //   // 如果存在，则获取数据并将其存储在变量中
    //   var data = localStorage.getItem("myData");
    //   // 使用数据，例如将其输出到控制台
    //   console.log("从本地存储中获取的数据：", data);
    // } else {
    //   this.$router.push({path:'/'})
    // }

      if(this.$route.query.identity === 'student')
        this.finalTableHead = this.tableHeadDataStu
      else if(this.$route.query.identity === 'teacher')
        this.finalTableHead = this.tableHeadDataTeacher
      
      
       this.personalMessage = JSON.parse(localStorage.getItem('data'))
      
      
    },
    methods:{
      handleEdit(){
          this.message = []
          const h = this.$createElement;
          
          
          Object.keys(this.finalTableHead).forEach(element => {
            const h1 = h('div', {style:{
                fontSize: '14px',
                marginTop: '8px',
                width: '100%',
                height: '30px',
                textAlign: 'center',
                lineHeight: '30px',
            }
              
            }, [
            h('div', {
              style:{
                width: 'auto',
                height: '30px',
                display: 'inline-block'
              }
            }, `${this.finalTableHead[element]}`),
            h('input', {
              attrs: {
                value: this.personalMessage[element]?this.personalMessage[element]:""
              },
              style:{
                marginLeft: '8px',
                float: 'right'
              },
              on: {
                input: (event)=> {
                  // 在这里可以获取到输入框的值
                  let currentKey = element
                  let value = event.target.value
                  
                  this.submitData[currentKey] = value
                  
                  
                  console.log(event.target.value);
                }
            }
            }),
            
           
          ]);
            this.message.push(h1)
      })

      this.$msgbox({
          title: '编辑',
          message:  h('div', null,this.message) ,
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 2000);
            } else {
              done();
            }
          }
        }).then(action => {
          // 处理编辑按钮更改数据库
          if (action === 'confirm') {
            this.handleConfirmAction(this.submitData); // 处理点击确定按钮后的逻辑
            this.$message({
              type: 'success',
              message: '修改成功'
            })
          } else {
            this.$message({
              type: 'info',
              message: '已取消修改'
            })
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          });          
        })
            
      },
      handleConfirmAction(submitData){
            // 更改学生某个信息操作, 提交所有学生信息
            
            let obj
            obj = Object.assign({},this.personalMessage,submitData)
            
            if(this.$route.query.identity === 'student'){
                axios.put(`/prod-api/student/upData`,obj)
                    .then(response=>{
                      if(response.data.code === 0)
                        this.personalMessage = response.data.data
                    })
                    .catch(error=>{
                      this.$router.push({name:'error', query:{error:error}})
                    })

                
            }else if(this.$route.query.identity === 'teacher'){
                axios.put(`/prod-api/teacher/upData`,obj)
                      .then(response=>{
                      if(response.data.code === 0)
                         this.personalMessage = response.data.data
                      })
                      .catch(error=>{
                        this.$router.push({name:'error', query:{error:error}})
                      })

                  
            }

            
        },
    }

}
</script>

<style>

</style>